<template>
    <div class="index">
        <!-- 二级路由的占位组件 -->
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <div class="tabbar">
            <!-- 底部按钮 -->
            <MyTabbar></MyTabbar>
        </div>
    </div>
</template>

<script>
// 导入组件
import MyTabbar from '../components/MyTabbar.vue'
export default {
  //注册组件
  components:{
    MyTabbar
  }
}
</script>

<style lang="scss" scoped>
      // 入场动画
      .fade-enter{ //动画开始时
        opacity: 0;
    }
    .fade-enter-active{
        transition: all 1s;
    }
    .fade-enter-to{ //动画结束时
        opacity: 1;
    }
    //出场动画
    .fade-levae{ //动画开始时
        opacity: 0;
    }
    .fade-levae-active{
        transition: all 1s;
    }
    .fade-entlevaeer-to{ //动画结束时
        opacity: 1;
    }
</style>